<script setup>
import { onMounted, ref } from 'vue';

    const props = defineProps({
        size: {
            type: String,
            default: 'big',
        },
    });

    const button = ref(null);
    onMounted(() => {
        button.value.classList.add(props.size)
    })
</script>


<template>
    <button ref="button" class="but">按钮</button>
</template>

<style scoped>
    .but {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .big{
        width: 80%;
        height: 50px;
    }
    .little{
        width: 50%;
        height: 30px;
    }
</style>